<div class="font-book-frame">
    
    <div class="font-horizontal-line"></div>
    <div style="height: 35px">
        <div class="font-vertical-line font-vertical-line-font-size"></div>

        <div style="float: left; width: 50%; height: 35px">
            <div id="nav-btn-smaller" class="font-btn-decrease clickableEffect" data-bind="click: bookVM.decreaseFontSize">&nbsp;</div>
        </div>
        <div style="float: right; width: 50%; height: 35px">
            <div id="nav-btn-bigger" class="font-btn-increase clickableEffect" data-bind="click: bookVM.increaseFontSize">&nbsp;</div>
        </div>

    </div>
    <div class="font-horizontal-line"></div>

    <div style="height: 35px" data-bind="click: $root.bookVM.goToFontList">
        <div style="float: left; width: 50%; height: 35px">
            <div class="font-label" data-bind="text: $root.bookVM.strFonts()">Fonts</div>
        </div>
        <div style="float: right; width: 50%; height: 35px">
            <div class="font-arrow"></div>
            <div class="font-name-label" data-bind="text: $root.bookVM.textFontName(), style:{fontFamily: $root.bookVM.textFontName() + ', Times, serif'}">Fonts</div>
        </div>
    </div>
    <div class="font-horizontal-line"></div>
    <div style="height: 122px">
        <div class="font-background" data-bind="text: $root.bookVM.strBackground()">Fonts</div>
        <div>
            <div class = "background-color-space-left-right">
                &nbsp;
            </div>
            
            <div class = "background-color-name-frame" data-bind="click:$root.bookVM.changeBackgroundToWhite">
                <div style="padding-left: 50%;">
                    <div id="font-white-bg" class="font-background-item"></div>
                </div>
                
                <div class="font-background-name" data-bind="text: $root.bookVM.strWhite">White</div>
            </div>
            <div class = "background-color-name-frame" data-bind="click:$root.bookVM.changeBackgroundToSepia">
                <div style="padding-left: 50%;">
                    <div id="font-sepia-bg" class="font-background-item"></div>
                </div>
                <div class="font-background-name" data-bind="text: $root.bookVM.strSepia">Sepia</div>
            </div>
            <div class = "background-color-name-frame" data-bind="click:$root.bookVM.changeBackgroundToBlack">
                <div style="padding-left: 50%;">
                    <div id="font-black-bg" class="font-background-item"></div>
                </div>
                <div class="font-background-name" data-bind="text: $root.bookVM.strBlack">Black</div>
            </div>
            <div class = "background-color-space-left-right">
                &nbsp;
            </div>

        </div>
    </div>
    <div style="width: 100%; height: 240px;"  data-bind="click: $root.bookVM.showHideFontEdit">
    </div>
</div>